跳到主要内容

减少动态效果

减少动态效果偏好允许用户在应用和操作系统中请求减少非必要的动态效果。

Rive 无法自动判断哪些动态效果应该被减少,因为动态效果可能是装饰性的、功能性的,也可能是交互含义的一部分。要支持减少动态效果,请通过数据绑定属性(例如 prefersReducedMotion)将用户的动态效果偏好传入 Rive 文件。然后使用该属性来决定你的状态机、时间线和绑定属性应如何表现。

减少动态效果偏好通常由应用或平台检测,然后在运行时传入 Rive 文件。对于 Web,这通常从 prefers-reduced-motion 媒体特性开始。有关无障碍指导,请参阅 MDN 的 prefers-reduced-motion 文档

常见策略

下面这些策略可用于在 Rive 文件中提供减少动态效果体验。

使用单独的减少动态效果路径

对于复杂交互和装饰性动态效果,为完整动态效果和减少动态效果创建单独的状态机路径。使用 prefersReducedMotion Boolean 属性来选择运行哪条路径。

降低或禁用动画速度

对于更简单的情况,可以将过渡时长、时间线速度或动画速度绑定到一个在启用减少动态效果时会发生变化的属性。

例如,完整动态效果可以使用正常的速度值,而减少动态效果则使用 0 或更低的值。

💡

使用 Converters 将你的 prefersReducedMotion boolean 转换为 0。

  1. 创建新的 converter

    创建一个名为 BooleanToSpeed 的新 converter 组。

    创建 converter 组

  2. 添加 Toggle converter

    这会切换 boolean,因此当 prefersReducedMotiontrue 时,输出将为 false

    添加 Toggle converter

  3. 添加 Convert to Number converter

    这会将 boolean 转换为数字,其中 true = 1false = 0

    添加 Convert to Number converter

  4. 数据绑定动画速度

    选中嵌套组件后,将 Speed 值数据绑定到 prefersReducedMotion,并添加 BooleanToSpeed converter。

    数据绑定你的速度值

现在,当 prefersReducedMotiontrue 时,动画速度将为 0。

用非动态反馈替代动态效果

减少动态效果并不总是意味着移除反馈。可以使用不透明度或颜色变化,而不是移动、缩放、旋转或弹跳。

减少移动距离

即使速度很慢,大幅空间移动也可能让人不适。考虑减少对象移动的距离,或用小幅偏移和淡入淡出来替代大幅移动。

运行时设置

在运行时,使用 data binding 将用户的动态效果偏好传入 Rive 文件。

未来,运行时可能会公开一个内置的减少动态效果值,.riv 文件可以直接读取。现在,请自行将用户的动态效果偏好传入文件。

Rive 文件应使用该属性来控制状态机过渡、时间线速度或绑定的动画属性。

Rive 不会自动应用减少动态效果。文件作者需要决定哪些动态效果是必要的、哪些是装饰性的,以及减少动态效果体验应该是什么样。